<template>
    <div class="specific-container" v-if="List">
        <div class="specific">                         
            <div class="specific_detail" v-for="item in List" :key="item.id">
                <router-link :to="{path:'/detail',query:{id:item.id}}">
                    <img :src="imgUrl[item.type]" alt="">
                    <div class="info ">
                        <div class="row first">
                            <span class="hj" v-if="item.is_counteroffer==1"></span>
                            <span class="name">{{item.united}}</span>
                            <span class="level">{{item.level}}级</span>
                            <span class="service">{{item.area1}}-{{item.area2}}</span>
                            <span class="platform"> 
                                <i class="apple" v-if="item.source==2"></i>
                                <i class="android" v-if="item.source==1"></i>
                            </span>
                        </div>
                        <div class="row">
                            <span class="all_point">总评分:{{item.score_total}}</span>
                            <span class="role_point">人物评分:{{item.score_role}}</span>
                            <span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="row">
                            <span class="red" v-for="signitem in sp(item.sign)" :key="signitem">
                                {{signitem}}
                                </span>
                            <span class="sc">{{item.star}}人收藏</span>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
export default {
    props:{
        List:Array
    },
    data(){
      return{
        signList:[],
        imgUrl:Pictures.imgUrl,

      }
  },
    computed:{
    sp(){
        return function(sign){
            return sign.split(';');
        };
    }
  }
}
</script>
<style lang="scss" scoped>
        .specific_detail {
            position: relative;
            width: 100%;
            height:rem(260);
            line-height: rem(60); 
            padding:rem(40) 0;          
            border-top: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            img {
                float: left;
                margin-right: rem(30);
                width: rem(175);
                height: rem(175);
                border-radius: rem(15);
                border-top: 1px solid #f1f1f1;
            }
            .info {
                float: left;
                width: 60%;
                height: rem(175);

                .row {
                    width: 100%;
                    height:rem(60);
                    line-height: rem(60);
                .hj{
                        display: inline-block;
                        margin-bottom: rem(-10);
                        width: rem(50);
                        height: rem(50);
                        background: url(../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .name{
                    font-size: rem(45);
                    border-right: 1px solid #f1f1f1;
                    padding-right: rem(15);
                    margin-left: rem(15);
                    }
                    .level {
                    color: #888;
                    margin-left: rem(10);
                    font-size: rem(35);
                    }
                    .all_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .role_point{
                    color: #888;
                    font-size: rem(35);
                    }
                    .red {
                        color: #e74e4b;
                        font-size: rem(35);
                        border: 1px solid #e74e4b;
                        border-radius: 3px;
                        margin-right: rem(10);
                    }
                    .service {
                        position: absolute;
                        right: rem(50);
                        color: #888;
                        font-size: rem(35);
                        margin-right: rem(10);
                    }
                    .platform {
                        position: absolute;
                        right: 0px;
                        margin-top: rem(5);
                        
                    }

                    .apple {
                        display: inline-block;
                        width: rem(46);
                        height: rem(46);
                        background: url(../../assets/imgs/apple.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .android{
                        display: inline-block;
                        width: rem(46);
                        height: rem(46);
                        background: url(../../assets/imgs/android1.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                    }
                    .price {
                        position: absolute;
                        right: 0px;
                        font-size: rem(50);
                        font-weight: 700;
                        color: #e74e4b;
                    }

                    .sc {
                        position: absolute;
                        right: 0px;
                        color: #888;
                        font-size: rem(35);
                    }

                }
            }
        }
     
    


</style>
